<template>
  <div class="wrap">
    <!-- 导航栏和轮播模块 begin-->
    <div id="demo" class="carousel slide" data-ride="carousel">
      <nav class="navbar navbar-expand-sm bg-light" id="nav">
      <ul class="navbar-nav nav row">
        <li class="nav-item" v-for="(item,index) in title">
          <router-link :to="item.path" class="link-to">
            <a class="nav-link" href="#">{{item.name}}</a>
          </router-link>
        </li>
        <li>
          <button type="button" class="btn btn-primary">登录</button>
        </li>
      </ul>
      </nav>
      <h2 class="name">媒体大脑</h2>
      <h5 class="goal">让大数据和人工智能为媒体赋能</h5>
      <div class="more">
       <button type="button" class="btn btn-primary bt">了解更多</button>
      </div>
      <div id="myCarousel" class="carousel slide">
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>
        <div class="carousel-inner">
          <div class="item active">
                  <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="第一张" />
              </div>
              <div class="item">
                  <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" alt="第二张" />
              </div>
              <div class="item">
                  <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" alt="第三张" />
              </div>
        </div>
      </div>
    </div>
    <!-- 导航栏和轮播模块 end-->
    <div class="platforms navbar-nav nav row">
      <div class="intro av-item col-sm-4" v-for="(item,index) in intro">
        <div class="img">
          <img :src="item.image" alt="">
        </div>
        <div class="tit">
          <p class="mainTit">{{item.tit}}</p>
          <p class="mainCon">{{item.content}}</p>
        </div>
      </div>
    </div>
    <div class="platShow navbar-nav nav row">
        <div class="lists">
          <div class="pain">媒体大脑产品平台</div>
          <div class="each" v-for="(item,index) in products">
            <img :src="item.img" alt="" class="listImg">
            <div class="title">
              <p class="mainTit">{{item.txt}}</p>
              <p class="mainCon">
                <a href="">查看</a>
              </p>
            </div>
          </div>
        </div>
    </div>
    <div class="mask navbar-nav nav row">
      <div class="client">
        <img src="../../assets/news.jpg" alt="">
      </div>
    </div>
    <Bottom></Bottom>
   </div>
</template>
<script>
import Bottom from '@/components/common/bootom'
export default {
  data () {
    return {
      title: [{'name':'线索发现','path':'/discovery'},
              {'name':'热点预测','path':'/hotspot'},
              {'name':'智能标签','path':'/noopsyche'},
              {'name':'内容传播','path':'/content'},
              {'name':'用户评论','path':'/user'},
              {'name':'指挥大屏','path':'/bigscreen'}],
      imgs:['https://static.runoob.com/images/mix/img_mountains_wide.jpg',
            'https://static.runoob.com/images/mix/img_nature_wide.jpg',
            'https://static.runoob.com/images/mix/img_fjords_wide.jpg'
      ],
      intro:[{'tit':'内容生产平台','content':'通过数据采集、整理、热点预测，辅助输出新闻产品。','image':'../../../static/image/infor.png'},
            {'tit':'智能推送平台','content':'通过智能标签系统，实现“内容找人”的个性化分化。','image':'../../../static/image/clock.png'},
            {'tit':'用户聚合平台','content':'一站搞定全年的福利采购、仓储、物流、客服，后顾无忧。','image':'../../../static/image/clock.png'}
      ],
      products:[
            {'img':'../../../static/image/people.png','txt':'通过数据采集，整理，热点预测，辅助输出新闻产品通过数据采集，整理，热点预测'},
            {'img':'../../../static/image/people.png','txt':'通过数据采集，整理，热点预测，辅助输出新闻产品通过数据采集，整理，热点预测'},
            {'img':'../../../static/image/people.png','txt':'通过数据采集，整理，热点预测，辅助输出新闻产品通过数据采集，整理，热点预测'},
            {'img':'../../../static/image/people.png','txt':'通过数据采集，整理，热点预测，辅助输出新闻产品通过数据采集，整理，热点预测'},
            {'img':'../../../static/image/people.png','txt':'通过数据采集，整理，热点预测，辅助输出新闻产品通过数据采集，整理，热点预测'},
            {'img':'../../../static/image/people.png','txt':'通过数据采集，整理，热点预测，辅助输出新闻产品通过数据采集，整理，热点预测'},
      ]
    }
  },
  components:{
     Bottom
  },
  methods: {
      menu(){
       var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       if(scrollTop>400){
         //判断当滚到高度大于400时候出现导航栏
         $('.top').fadeIn(500);
       }else if(scrollTop<=400){
         //判断当滚到高度小于400时候导航栏消失
         $('.top').fadeOut(500);
       }

      }
  },

  mounted(){
    $("#myCarousel").carousel({
      interval :3000,
      pause:'hover',
      wrap:'true'
    });
  },
  created () {
    window.addEventListener('scroll',this.menu);
     $('.top').hide();
  },
  destroyed(){
    window.removeEventListener('scroll',this.menu);
    $('.top').show();
  }
}
</script>
<style>
  html,body{width: 100%;height: 100%}
  .wrap .carousel-inner .item img{width: 100%;height:400px;}
  .logo {padding:0;}
  #navbar-collapse ul {margin-top:0;  }
  .carousel-inner img{  margin: 0 auto;}
  .carousel-control{font-size: 100px;}
  .top{display: none;position: fixed;top: 0px;background-color: #fff;z-index: 101;}
  .carousel-item img{width: 100%;}
  .wrap .carousel-indicators{bottom: 55px;}
  #nav{position: absolute;z-index: 99;width: 100%;padding:20px 25%;}
  .wrap .navbar-nav{width:100%;display: flex;align-items: center;justify-content: space-between;}
  .wrap .navbar-nav .nav-link{color: white;}
  .wrap .navbar-nav .nav-link:hover,.wrap .navbar-nav .link-to:hover{background:transparent;text-decoration: none;}
  .wrap .navbar-nav .nav-link:visited,.wrap .navbar-nav .link-to:hover{background: transparent;text-decoration: none;}
  .wrap #demo .name,.wrap #demo .goal,.wrap #demo .more{position: absolute;color: white;z-index: 100;width: 100%;padding:20px 25%;text-align: center;}
  .wrap #demo .name{top: 40%;font-weight: bolder;}
  .wrap #demo .goal{top:55%;font-size: 16px;}
  .wrap #demo .more{top:90%;height: 45px;}
  .wrap #demo .bt{width: 150px;height: 45px;}
  .wrap #demo .btn-primary{background-color: #6ea0c9;border-color:#6ea0c9; }
  .wrap #demo .btn-primary{background-color: rgba(139, 171, 209, 1);border-color:rgba(139, 171, 209, 1); }
  .wrap .platforms{width: 100%;padding:0px 25%;}
  .wrap .platforms{background:#F2F2F2;}
  .wrap .platforms{text-align: center;}
  .wrap .platforms .intro, .wrap .platShow .img{padding: 60px 0px;width: 33%;}
  .wrap .platShow .img{line-height: 80px;}
  .wrap .platforms .intro .img{display:inline-block;width: 80px;height: 80px;position: relative;border-radius: 50%;border:1px solid rgba(139, 171, 209, 1); }

  .wrap .platforms .intro .img img{position: absolute; left:50%; top:50%;transform:translate(-50%,-50%); }
  .wrap .platforms .intro .tit{margin-top: 30px;}
  .wrap .platforms .intro .mainTit{font-size: 18px;}
  .wrap .platforms .intro .mainCon{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; width: 80%;margin-left: 10%;}
  .wrap .platShow .each img{display: inline-block;}
  .wrap .platShow .pain{font-weight: bolder;font-size: 16px;width: 100%;height: 50px;line-height: 70px;padding: 0px 40px;}
  .wrap .platShow .lists{width: 100%;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap}
  .wrap .platShow .lists .each{width:33%;text-align: center;position: relative;margin-top: 30px;}
  .wrap .platShow .lists .each img{display: inline-block;width:220px;height: 240px;}
  .wrap .mask{width: 100%;height: 550px;background-image:url('https://static.runoob.com/images/mix/img_fjords_wide.jpg');background-repeat:no-repeat;background-position:center top;background-size: 100% 100%;margin-top: 30px;}
  .wrap .mask{width: 100%;height: 550px;background-image:url('https://static.runoob.com/images/mix/img_fjords_wide.jpg');background-repeat:no-repeat;background-position:center top;background-size: 100% 100%;margin-top: 30px;}
  .wrap .platShow{width: 100%;padding:0px 25%;}
  .wrap .platShow .lists .each:hover .title{display: block}
  .wrap .platShow .lists .title{display:none;position: absolute;z-index: 100;top:0px;bottom: 0px;background: white;opacity: 0.7;padding: 40px 65px;}
  .wrap .platShow .lists .title .mainCon{color: #6ea0c9;}
  .wrap .platShow .lists .title .mainCon a:hover{text-decoration: none;}
  .wrap .mask .client{width: 45%;background: #ccc;}
  .wrap .mask .client img{width: 100%;height: 100%;}
  .wrap .mask{width: 100%;height: 550px;background-image:url('https://static.runoob.com/images/mix/img_fjords_wide.jpg');background-repeat:no-repeat;background-position:center top;background-size: 100% 100%;margin-top: 30px;}
  .wrap .platShow{width: 100%;padding:0px 25%;}
  .wrap .platShow .lists .each:hover .title{display: block}
  .wrap .platShow .lists .title{display:none;position: absolute;z-index: 100;top:0px;bottom: 0px;background: white;opacity: 0.7;padding: 40px 65px;}
  .wrap .platShow .lists .title .mainCon{color: rgba(139, 171, 209, 1);}
  .wrap .platShow .lists .title .mainCon a:hover{text-decoration: none;}
  .wrap .mask .client{width: 45%;background: #ccc;}
  .wrap .mask .client img{width: 100%;height: 100%;}
  @media screen and (max-width: 1500px) {
    .wrap .platShow .lists .each{width: 25.33%;}
    .wrap .platShow .lists .each img{width: 100%;height: 220px;}
    .wrap .mask .client{width: 47%;}
    .wrap .mask{height: 530px;}
    .wrap .platShow .lists .title{padding: 30px 30px;}

  }
  @media screen and (max-width: 1300px) {
    .wrap .platShow .lists .each{width: 25.33%;padding: 20px 0px;}
    .wrap .platShow .lists .each img{height: 200px;}
    .wrap .mask{height: 510px;}
    .wrap .platShow .lists .title{padding: 40px 20px;}
  }
  @media screen and (max-width: 1160px) {
    #nav{padding: 20px 20%;}
    .wrap .platShow .lists .each{width: 25.33%;padding:15px 0px;}
    .wrap .platforms,.wrap .platShow{width: 100%;padding: 0px 20%;}
    .wrap .mask .client{width: 55%;}
    .wrap .mask{height: 490px;}
    .wrap .platShow .lists .title{padding: 40px 10px;}
  }
</style>